<!-- 回收预约 -->
<!-- 保留更改 -->
<template>
    <view>
        <view class="box">
            <view class="userphone">
                <view class="u-flex">
                    <text style="min-width: 150rpx;">手机号</text>
                    <input class="u-padding-left-30" type="number" v-model="data.mobile" placeholder="请输入手机号" maxlength="11"/>
                </view>
                <view class="u-flex">
                    <text style="min-width: 150rpx;">联系人</text>
                    <input class="u-padding-left-30" type="text" v-model="data.phone_name" placeholder="请输入联系人"/>
                </view>
            </view>
            <view class="useraddress">
                <view @click="fixedAddress()" style="display: flex;align-items: center;justify-content: space-between;">
                    <text style="min-width: 150rpx;">定位地址</text>
                    <text style="width: 400rpx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{data.location_address || '请定位地址'}}</text>
                    <image src="../../static/img/myhome/icon-dingwei@3x.png" mode=""></image>
                </view>
                <view class="u-flex">
                    <text style="min-width: 130rpx;">详细地址</text>
                    <input class="u-padding-left-30" type="text" v-model="data.recycling_address" placeholder="请输入详细地址"/>
                </view>
            </view>
            <view class="usertime">
                <view class="u-flex">
                    <text style="min-width: 150rpx;">预约时间</text>
                    <!-- 日期 -->
                    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                        {{date}} <u-icon name="arrow-down-fill" color="#999999" size="20" style="margin-left: 30rpx;"></u-icon>
                    </picker>
                </view>
                <view>
                    <button @click="buttondate(index,item)" :class="{'datebutton': buttonactived === index}"
                        v-for="(item, index) in buttontiem" :key="item">
                        {{item}}</button>
                </view>
            </view>
            <view class="textg" v-if="isHas"><text>已添加物品</text></view>
            <view class="usergoods">
                <addgood v-for="(item, index) in data.wp" :index="index" :userArr="item" :key="index" @wpDelete="wpDelete" @showEtid="showEtid(item,index)" ></addgood>
            </view>
            <view class="add_product">
                <button @click="isShowadd_pro">
                    <image src="../../static/img/myhome/add@3x.png"></image><text>{{addgoodarr.length > 0 ? '继续添加物品' : '添加物品'}}</text>
                </button>
            </view>
        </view>
        <!-- 展示继续添加商品弹窗 s -->
        <u-popup v-model="isShow" mode="bottom">
            <addgoods @myEven="change" @closewin="colse"></addgoods>
        </u-popup>
        
        <!-- 编辑弹窗 -->
        <u-popup v-model="isShowEdit" mode="bottom">
            <editgood ref="edit" @myEven="changeEdit" @closewin="colseEtid"></editgood>
        </u-popup>
        
        <!-- 总计金额 -->
        <view class="footer">
            <button @click="post"><i>提交预约</i></button>
        </view>
    </view>
</template>

<script >
    import Addgood from './Addgood.vue'
    import addgoods from './addgoods.vue'
    import QQMapWX from "../../requestApi/qqmap-wx-jssdk.min.js";
    import editgood from './editgood.vue'

    export default {
        components: {
            Addgood,
            addgoods,
            editgood
        },
        data() {
            const currentDate = this.getDate({
                format: true
            })
            return {
                buttonactived: -1,
                date: currentDate,
                isShow: false,
                isShowEdit: false,
                data: {
                    mobile: '',
                    phone_name: '',
                    location_address: '',
                    recycling_address: '',
                    pickup_time: '',
                    pickup_time_area: '',
                    longitude: '',
                    latitude: '',
                    wp: [],
                    is_virtual: 0,
                },
                buttontiem: ['08:00~10:00', '10:00~12:00', '14:00~16:00', '16:00~18:00'],
                posting: false
            };
        },
        onLoad(options) {
            // this.data = JSON.parse(options.data)
            this._getDefaultdata();
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            },
        },
        methods: {
            _getDefaultdata() {
                this.$u.api.getDefaultdata().then(res => {
                    this.data.mobile = res.mobile;
                    this.data.location_address = res.location_address;
                    this.data.recycling_address = res.recycling_address;
                    this.data.phone_name = res.phone_name;
                    this.data.longitude = res.longitude;
                    this.data.latitude = res.latitude;
                })
            },
            fixedAddress() {
                // 腾讯地图Api
                const qqmapsdk = new QQMapWX({key: getApp().globalData.qqmapsdkKey});
                const _this = this;
                uni.chooseLocation({
                    success: function (res) {
                        qqmapsdk.reverseGeocoder({
                            location: {
                                latitude: res.latitude,
                                longitude: res.longitude
                            },
                            success: data => {
                                _this.data.longitude = res.longitude;
                                _this.data.latitude = res.latitude;
                                _this.data.location_address = data.result.address;
                            },
                        });
                    }
                });
            },
            // 采编按钮样式
            buttondate(index, item) {
                this.buttonactived = index
                this.data.pickup_time_area = this.date + ' ' + item;
            },
            post() {
                if (this.posting === true) {
                    return false;
                }
                this.posting = true;
                if (!this.$u.test.mobile(this.data.mobile)) {
                    uni.showToast({
                        title: '请输入正确手机号',
                        duration: 1000,
                        icon: 'none'
                    });
                    return false;
                }
                if (this.$u.test.isEmpty(this.data.phone_name)) {
                    uni.showToast({
                        title: '联系人不能为空',
                        duration: 1000,
                        icon: 'none'
                    });
                    return false;
                }
                if ( this.$u.test.isEmpty(this.data.location_address) || this.$u.test.isEmpty(this.data.recycling_address) ) {
                    uni.showToast({
                        title: '录入完整地址',
                        duration: 1000,
                        icon: 'none'
                    });
                    return false;
                }
                if (this.$u.test.isEmpty(this.data.pickup_time_area)) {
                    uni.showToast({
                        title: '录入完整地址',
                        duration: 1000,
                        icon: 'none'
                    });
                    return false;
                }
                if (this.$u.test.isEmpty(this.data.wp)) {
                    uni.showToast({
                        title: '请添加至少一项物品',
                        duration: 1000,
                        icon: 'none'
                    });
                    return false;
                }

                this.data.pickup_time = this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss');
                this._postRecoverAdd(this.data);
            },
            // 日期 s
            // bindPickerChange: function(e) {
            //     console.log('picker发送选择改变，携带值为', e.target.value)
            //     this.index = e.target.value
            // },
            bindDateChange: function (e) {
                this.date = e.target.value
            },
            // bindTimeChange: function(e) {
            //     this.time = e.target.value
            // },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;
                ;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            },
            // 弹窗
            isShowadd_pro() {
                this.isShow = true
            },

            showEtid(wp, index) {
                this.$refs.edit.newdata(wp, index);
                this.isShowEdit = true;
            },
            wpDelete(index) {
                this.data.wp.splice(index, 1);
            },
            colseEtid() {
                this.isShowEdit = false;
            },
            // 将子组件的数据 push 进 数组中
            changeEdit(item, index) {
                this.data.wp[index] = item;
                this.isShowEdit = false
            },
            // 将子组件的数据 push 进 数组中
            change(e) {
                this.data.wp.push(e)
                this.isShow = false
            },
            colse() {
                this.isShow = false
            },
            // 回收预约api
            _postRecoverAdd(data) {
                uni.showLoading({
                    title: '提交中'
                });
                var that = this;
                that.$u.api.postRecoverAdd(data).then(res => {
                    uni.hideLoading();
                    uni.showModal({
                        title: '提示',
                        content: '预约成功',
                        showCancel: false,
                        success: function (res) {
                            if (res.confirm) {
                                that.posting = false;
                                /*uni.navigateBack({
                                    delta: 1
                                });*/
                                /*2022年4月23日11:24:52 修改为跳转到订单列表*/
                                uni.reLaunch({
                                    url: '/mypages/User/index?active=1'
                                })
                            } else if (res.cancel) {}
                        }
                    });
                }).catch(err => {
                    uni.hideLoading();
                    uni.showToast({
                        title: err.msg,
                        duration: 1000
                    });
                })
            },
        },
    }
</script >

<style lang="scss" scoped>
    .cover_view {
        height: 300rpx;
        background-color: pink;
    }

    .box {
        padding: 30rpx;
        // background-color: #eee;
    }

    .textg {
        font-size: 32rpx;
        line-height: 38rpx;
        color: #2d3945;
        margin: 60rpx 0 30rpx 30rpx;
    }

    span {
        font-size: 28rpx;
        line-height: 48rpx;
        color: #666666;
        margin-left: 96rpx;
    }

    .userphone {
        height: 196rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 0 30rpx;
        line-height: 98rpx;
        margin-bottom: 30rpx;

        view:nth-child(1) {
            border-bottom: 1px solid #EEEEEE;
        }
    }

    .useraddress {
        height: 196rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 0 30rpx;
        line-height: 98rpx;
        margin-bottom: 30rpx;

        view:nth-child(1) {
            border-bottom: 1px solid #EEEEEE;
        }

        image {
            width: 50rpx;
            height: 50rpx;
        }
    }

    .usertime {
        height: 308rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 0 30rpx;
        line-height: 98rpx;
        margin-bottom: 30rpx;

        // text {
        //     float: left;
        // }
        
        picker {
            font-size: 28rpx;
            color: #666666;
            text-align: left;
            padding-left: 30rpx;
        }

        view:nth-child(1) {
            border-bottom: 1px solid #EEEEEE;
        }

        view:nth-child(2) {
            margin-top: 30rpx;
            display: flex;
            flex-wrap: wrap;
        }

        button {
            width: 190rpx;
            height: 70rpx;
            border-radius: 35rpx;
            background-color: #ffffff;
            border: solid 2rpx #f2f2f2;
            margin: 0 10rpx 10rpx 0;
            color: #999999;
            font-size: 24rpx;
            line-height: 70rpx;
        }

        .datebutton {
            background-color: #1bc078;
            color: #FFFFFF
        }
    }

    .add_product {
        margin-bottom: 10vh;

        button {
            width: 570rpx;
            height: 98rpx;
            line-height: 98rpx;
            background-color: #ffffff;
            border-radius: 49rpx;
        }

        text {
            font-size: 28rpx;
            color: #1bc078;
        }

        image {
            margin-right: 20rpx;
            width: 24rpx;
            height: 24rpx;
        }
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        min-height: 98rpx;
        width: 100%;
        background-color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
        
        button {
            width: 570rpx;
            height: 78rpx;
            background-color: #1bc078;
            border-radius: 39rpx;
            margin: 20rpx 0;

            i {
                font-size: 32rpx;
                color: #ffffff;
            }
        }
    }

    .showeditgood {
        height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 998;
    }
</style>
